.request-log-main-wrapper {
  position: relative;
  height: 100%;
}

.request-log-pane-header {
  width: 100%;
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 1;
}
.request-log-pane-header .request-method {
  font-size: 10px;
  font-weight: var(--requestly-font-weight-semibold);
  line-height: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  width: 38px;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
}
.request-log-pane {
  font-size: var(--requestly-font-size-sm, 13px);
  background-color: transparent;
  border: 1px solid var(--border-dark);
  border-radius: var(--border-radius-md);
  height: 100%;
  overflow: hidden;
}

.request-log-pane div[class*="Navigation-controls"] {
  padding: 8px;
  background-color: transparent;
  border-bottom: 1px solid var(--border-dark);
}

.request-log-pane div[class*="Navigation-controls"] button[class*="Navigation-button"] {
  border: none;
  margin-right: 2px;
  font-size: var(--requestly-font-size-sm, 13px);
  font-weight: normal;
  color: var(--requestly-color-text-default);
  border-radius: var(--border-radius-sm);
}

.request-log-pane div[class*="Navigation-controls"] button[class*="Navigation-button"]:hover,
.request-log-pane div[class*="Navigation-controls"] button[class*="Navigation-button"][class*="Navigation-selected"] {
  background-color: #3e404497;
}
.request-log-pane div[data-reach-tabs] {
  height: 100%;
  overflow: hidden;
}

.request-log-pane div[data-reach-tab-panels] {
  overflow-y: auto;
  height: calc(100% - 45px);
}

.request-log-pane div[data-reach-tab-panel] {
  height: 100%;
}

/* log table */
.log-table {
  color: #ffffffd9;
  background-color: #1d1d1d;
}
.log-table * {
  border: none !important;
}
.log-table[class*="Table-table"]:last-child {
  border: none !important;
}

.request-log-pane .log-table {
  color: var(--requestly-color-text-default);
}

.request-log-pane .log-table thead tr {
  background-color: rgb(40, 42, 46);
}

.request-log-pane .log-table thead tr th [class*="Table-content"] {
  font-weight: 600;
  letter-spacing: 0.25px;
}

.request-log-pane .log-table tbody tr[class*="Table-row"]:nth-child(odd) {
  background-color: #242529;
}

.request-log-pane .log-table tbody tr[class*="Table-row"]:nth-child(even) {
  color: inherit;
  background-color: #2a2a2d;
}

/* payload preview */
.payload-preview-collapse .ant-collapse-item {
  padding: 8px;
}

.request-log-pane-url {
  width: 800px;
  font-size: var(--requestly-font-size-sm, 13px);
}

@media only screen and (max-width: 1200px) {
  .request-log-pane-url {
    width: 600px;
  }
}

/* action header */
.action-header-input .ant-input {
  padding: 5px;
}

.action-header-input .ant-input-group-addon .ant-btn .anticon {
  margin: 11px 0;
}

.action-header-input .traffic-table-regex-btn-inactive {
  background: transparent;
}

.action-header-input .traffic-table-regex-btn:hover,
.action-header-input .traffic-table-regex-btn-active,
.traffic-table-filter-btn-active.ant-btn {
  background: var(--border-dark);
  color: var(--requestly-color-text-default);
}

.ant-btn span.traffic-table-filter-btn-content {
  display: inline-flex;
  align-items: center;
}

.traffic-table-applied-filter-count.ant-badge {
  margin-left: 6px;
}

.traffic-table-applied-filter-count .ant-badge-count {
  border-radius: 3px;
}

.traffic-table-applied-filter-count .ant-scroll-number-only {
  font-size: 10px;
  font-weight: 700;
}

.traffic-table-filters-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 1.25rem;
  padding: 0 10px 0 25px;
}

.traffic-table-filters-container section {
  display: flex;
  gap: 12px;
}

.clear-logs-filter-btn.ant-btn {
  font-size: var(--requestly-font-size-sm, 12px);
  font-weight: 500;
  margin-top: 1.6rem;
  color: var(--requestly-color-primary);
}

.traffic-table-filter-label {
  color: var(--requestly-color-text-default);
  font-weight: 500;
}

.traffic-table-filter-select .ant-select-selector {
  width: 220px;
  margin-top: -10px;
}

[data-reach-tab-panels] > div {
  min-height: 180px;
}

.navigation-panel-wrapper {
  overflow-y: auto;
  height: 100%;
  padding: 12px;
  color: var(--requestly-color-text-default);
}

.navigation-panel-wrapper .binary-data {
  font-style: italic;
  color: var(--requestly-color-text-subtle);
}

.navigation-panel-wrapper .react-resizable {
  height: calc(100% - 35px) !important;
}
